<template>
  <div>
    <el-dialog :visible.sync="isShow" v-if="isShow" :append-to-body="true" title="KOL审核" width="55%" :before-close="handleClose" top="150px" :close-on-click-modal="false">
      <div class="flexStartDetween">
        <div class="infoBox width45">
          <p>KOL信息</p>
          <div class="info flex" v-for="(item,index) in userData" :key="index">
            <div class="width50">{{ item.label }}</div>
            <div class="leftBorder width50">{{ item.value }}</div>
          </div>
        </div>
        <div class="infoBox width50">
          <el-form ref="ruleForm" :model="formParams" :rules="ruleForm" label-width="0">
            <div class="flex item-box" v-for="(item,index) in itemData" :key="index">
              <div class="title width25">
                {{ item.label }}<span :class="item.pass?'mustPass':'noMustPass'">*</span>
              </div>
              <div class="content width80">
                <el-form-item class="item-clear" v-show="item.key=='check_status'" label="" prop="check_status">
                  <el-radio-group v-model="formParams.check_status">
                    <el-radio-button :label="1">通过</el-radio-button>
                    <el-radio-button :label="2">不通过</el-radio-button>
                  </el-radio-group>
                </el-form-item>
                <el-form-item class="item-clear" v-show="item.key=='check_reason'" label="" prop="check_reason" style="height:auto;padding-bottom:5px">
                  <el-input type="textarea" rows="4" v-model="formParams.check_reason" placeholder="请输入审核理由" />
                </el-form-item>
              </div>
            </div>
          </el-form>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="medium" @click="handleClose">取 消</el-button>
        <el-button size="medium" type="primary" @click="handleConfirm('ruleForm')">确 定</el-button>
      </span>
    </el-dialog>
    <GoogleCheck ref="GoogleCheck" :show="googleCheckShow" :type="3" @handleConfirm="handleConfirm('ruleForm')" @handleClose="handleQrClose"/>
  </div>
</template>

<script>
import {
  resourceCheck
} from '@/api/kol'
import GoogleCheck from '@/components/GoogleCheck'
export default {
  components: {
    GoogleCheck
  },
  props: {
    show: {
      type: Boolean,
      default: false
    },
    data: {
      type: Object,
      default: function () {
        return {}
      }
    },
  },
  data () {
    return {
      isShow: false,
      googleCheckShow: false,
      itemData: [
        { label: '审核操作', key: 'check_status' ,pass:true},
        { label: '审核理由', key: 'check_reason' ,pass:true},
      ],
      userData: [
        { label: '用户ID', key: 'user_id', value: '' },
        { label: '用户昵称', key: 'nick_name', value: '' },
        { label: '总充值', key: 'recharge_total', value: '' },
        { label: 'KOL总邀请', key: 'kol_total', value: '' },
        { label: 'KOL返利', key: 'kol_rebate', value: '' },
        { label: '总上分', key: 'kol_add_total', value: '' },
        { label: '总减分', key: 'kol_dec_total', value: '' },
        { label: '总提现', key: 'cash_total', value: '' },
        { label: '佣金', key: 'commission', value: '' },
        { label: '剩余可提现', key: 'can_cash_amount', value: '' },
        { label: '剩余卢比', key: 'amount_total', value: '' },
      ],
      formParams: {
        id: 0,
        check_status: 2,
        check_reason: '',
      },
      ruleForm: {
        check_status: [{ required: true, trigger: 'blur', message: '请选择审核操作', }],
        check_reason: [{ required: true, trigger: 'blur', message: '请输入审核理由', }],
      }
    }
  },
  computed: {},
  watch: {
    show: function () {
      let that = this;
      that.isShow = that.show
      if (that.data) {
        for (const key in that.data) {
          // KOL信息
          that.userData.map(item => {
            if (key == item.key) {
              item.value = that.data[key]
            }
          })
        }
        that.formParams.id = JSON.parse(JSON.stringify(that.data)).id
      } else {
        that.formParams = {
          id: 0,
          check_status: 2,
          check_reason: '',
        },
          that.userData = [
            { label: '用户ID', key: 'user_id', value: '' },
            { label: '用户昵称', key: 'nick_name', value: '' },
            { label: '总充值', key: 'recharge_total', value: '' },
            { label: 'KOL总邀请', key: 'kol_total', value: '' },
            { label: 'KOL返利', key: 'kol_rebate', value: '' },
            { label: '总上分', key: 'kol_add_total', value: '' },
            { label: '总减分', key: 'kol_dec_total', value: '' },
            { label: '总提现', key: 'cash_total', value: '' },
            { label: '佣金', key: 'commission', value: '' },
            { label: '剩余可提现', key: 'can_cash_amount', value: '' },
            { label: '剩余卢比', key: 'amount_total', value: '' },
          ]
      }
    },
  },
  mounted () { },
  methods: {
    // 确认
    handleConfirm (formName) {
      let that = this, params = JSON.parse(JSON.stringify(that.formParams));
      // // 谷歌验证码
      // if (!that.$refs.GoogleCheck.formParams.google_code) {
      //   return that.googleCheckShow = true
      // } else {
      //   that.googleCheckShow = false
      // }
      that.$refs[formName].validate((valid) => {
        if (valid) {
          resourceCheck(params).then(function (res) {
            that.$message.success(res.msg)
            that.$emit('onHideDetails', true)
          }).catch((error) => {
            that.$message.error(error.msg)
          })
        } else {
          return false;
        }
      });
    },
    // 取消谷歌验证
    handleQrClose(){
      this.googleCheckShow = false
    },
    // 取消
    handleClose () {
      this.googleCheckShow = false
      this.$emit('onHideDetails', false)
    },
  }
}
</script>

<style scoped lang="scss">
.width45 {
  margin: 5px;
  border: 1px solid #999999;
}
.infoBox {
  color: #333;
  font-size: 15px;
  text-align: center;
  p {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
  }
  .info {
    border-top: 1px solid #999999;
    div {
      height: 40px;
      line-height: 40px;
      padding-left: 5px;
    }
    .leftBorder {
      color: #000;
      border-left: 1px solid #999999;
      font-weight: 550;
    }
  }
}
</style>